<template>
  <div class="dashboard-container" v-loading="loading">
    <div class="app-container">
      <!-- element 里提供的卡组件 -->
      <el-card class="tree-card">
        <!--   导入的子组件  这是头部   （头部只需要显示 添加子部门）-->
        <tree-tools :treeNode="company" :isRoot="true" @addDept="add" />
        <!-- 分割线 -->
        <el-divider></el-divider>
        <!-- 树状控件 -->
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <!-- 把data传递给这个组件里的treeNode  -->
          <!--delDept 是子组件传递过来关于删除的操作   -->
          <tree-tools
            slot-scope="{ data }"
            :treeNode="data"
            @delDept="getDeptList"
            @addDept="add"
            @editDept="doEdit"
          />
        </el-tree>
      </el-card>
      <!-- sync 修饰符 -->
      <!-- 将pid 和 showDialog传递给子组件add-dialog  -->
      <add-dialog
        ref="editDept"
        :showDialog.sync="showDialog"
        :pid="pid"
        @addDept="getDeptList"
      />
    </div>
  </div>
</template>

<script>
// 导入子组件
import treeTools from './components/tree-tools.vue'
import addDialog from './components/add-dialog.vue'
// 导入封装的获取部门列表的函数
import { getDepartments } from '@/api/departments'
// 导入递归函数
import { transToTreeData } from '@/utils/index.js'
export default {
  data () {
    return {
      loading: true, //加载动画
      pid: '', // 当前被点的id
      showDialog: false, // dialog对话框的显示与隐藏
      company: {}, // 就是头部的数据结构
      data: [], //绑定的数据
      defaultProps: {
        label: 'name', // 表示 从这个属性显示内容
        children: 'children'
      }
    }
  },
  // 注册组件
  components: {
    treeTools,
    addDialog
  },
  // 生命周期钩子
  async created () {
    //在这里调用封装好的获取部门列表的函数
    this.getDeptList()
  },
  methods: {
    // 获取部门列表的数据  因为获取部门列表在操作部门列表的时候还会用到
    // 所以封装成一个函数
    async getDeptList () {
      // 请求之前开启加载动画
      this.loading = true
      // 获取部门列表
      let res = await getDepartments()
      // console.log(res)
      // 绑定头部数据
      this.company = { name: res.data.companyName, manager: '负责人', id: '' }
      // // 处理数据
      // //定义一个数组接收数据 遍历这个数组
      let list = res.data.depts
      // 绑定处理过的数据 使用递归函数
      this.data = transToTreeData(list, '')
      // 请求完毕之后 结束加载动画
      this.loading = false
    },

    // 由tree-tools 传递过来的 这里在传递给子组件 add-dialog
    // 因为add-dialog里要用到id
    // 这里控制showDialog的显示
    // 点击新增部门触发
    add (id) {
      // 改为true 就代表显示dialog对话框
      this.showDialog = true
      // 把子组件传递的id 赋值给pid
      this.pid = id
    },
    // 点击了编辑部门触发
    doEdit (id) {
      // 调用子组件中查询部门详情的接口  并传入 id
      this.$refs.editDept.editDept(id)
      // 显示对话框
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 80px 120px;
  margin: 20px;
}
</style>
